import React from 'react'
// 获取定位城市
import { getCurrentCity } from "../../../utils/index";

import './index.scss'
// 路由跳转组件
import Jump from '../jump';

export default class Search extends React.Component {
  state = {
    // 搜索字段
    searchStr: '',
    cityName: ''
  }

  componentDidMount() {
    // 获取定位城市
    getCurrentCity().then((res: any) => {
      // console.log(res)
      this.setState({
        cityName: res.label
      })
    })
  }

  inputChange = (e) => {
    const {name, value} = e.target
    this.setState({
      [name]: value
    })
  }

  render() {
    
    return (
      <div className='search'>
        <Jump path="/cityList">
          <div className='search_left'>
            {this.state.cityName}
            <span className='iconfont'>&#xe65a;</span>
          </div>
        </Jump>
        
        <input type="text" name="searchStr"value={this.state.searchStr}
        onChange={this.inputChange} />
        <Jump path="/map">
          <span className='search_right iconfont'>&#xe65b;</span>
        </Jump>
      </div>
      
    )
  }
}
